<template>
  <div>
    <el-card class="list">
      <el-button type="danger" @click="addWorkPattern">添加工作模式</el-button>
      <el-table
        stripe
        :data="tableData"
        style="width: 100%"
        class="tables"
      >
        <el-table-column
          fixed
          prop="id"
          label="工作模式编号"
        />
        <el-table-column
          prop="name"
          label="工作模式"
        />
        <el-table-column
          prop="workPatternTypeDesc"
          label="类型"
        />
        <el-table-column
          prop="workDate"
          label="工作日期"
        />
        <el-table-column
          :formatter="workEndMinuteFormatter"
          prop="workEndMinute1"
          label="工作时间"
        />

        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
            <el-button type="text" size="small" class="red">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="block">
        <!-- <span class="demonstration">调整每页显示条数</span> -->
        <el-pagination
          :current-page.sync="pageConfig.Page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageConfig.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 添加工作模式弹框 -->
    <el-dialog title="新增工作模式" :visible="addPatternDialog" width="800px" @close="btnCancel">
      <div class="select">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="礼拜制" name="first">
            <el-form :model="formData" :rules="rules">
              <el-form-item label="工作模式名称:" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请填写工作模式名称" style="width:60%" />
              </el-form-item>
              <el-form-item label="连续工作天数:" prop="day">
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="周一" />
                  <el-checkbox label="周二" />
                  <el-checkbox label="周三" />
                  <el-checkbox label="周四" />
                  <el-checkbox label="周五" />
                  <el-checkbox label="周六" />
                  <el-checkbox label="周日" />
                </el-checkbox-group>
                <div class="tip">选中为工作时间，未选中为休息时间</div>
              </el-form-item>
              <el-form-item label="工作时间:" prop="workTime">
                <el-time-picker
                  v-model="workTime"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                />
              </el-form-item>

            </el-form>
          </el-tab-pane>
          <el-tab-pane label="连续制" name="second">
            <el-form :model="formData" :rules="rules">
              <el-form-item label="工作模式名称:" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请填写工作模式名称" style="width:60%" />
              </el-form-item>
              <el-form-item label="连续工作天数:" prop="name">
                上
                <el-input
                  v-model="input1"
                  placeholder="请输入"
                  style="width:140px"
                  type="text"
                >
                  <template slot="append">天</template>
                </el-input>
                休
                <el-input
                  v-model="input2"
                  placeholder="请输入"
                  style="width:140px"
                  type="text"
                >
                  <template slot="append">天</template>
                </el-input>
              </el-form-item>
              <el-form-item label="工作时间:" prop="workTime">
                <el-time-picker
                  v-model="workTime"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                />
              </el-form-item>

            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="btnOK">确 定</el-button>
        <el-button @click="btnCancel">取 消</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
import { getWorkPatternPage } from '@/api/empolyee/scheduling'
export default {
  data() {
    return {
      tableData: [
      ],
      total: 0,
      pageConfig: {
        Page: 1,
        pagesize: 10
      },
      addPatternDialog: false,
      formData: {},
      activeName: 'first',
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入工作模式名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        day: [
          { required: true }
        ],
        workTime: [{ required: true }]
      },
      checkList: [],
      workTime: '',
      input1: '',
      input2: ''

    }
  },
  created() {
    // 获取工作模式列表
    this.workPatternPage()
  },
  methods: {
    workEndMinuteFormatter(row, column, cellValue, index) {
      return (cellValue / 60) + '.00 小时'
    },
    // 添加工作模式
    onSubmit() {},
    // 分页触发的函数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 获取工作模式列表
    async workPatternPage() {
      const res = await getWorkPatternPage(this.pageConfig)
      console.log(res)

      this.tableData = res.data.items
      this.total = +res.data.counts
    },
    addWorkPattern() {
      this.addPatternDialog = true
    },
    // 取消弹框
    btnCancel() {
      this.addPatternDialog = false
    },
    btnOK() {},
    handleClick() {}

  }
}
</script>

<style>
.list{
  margin: 20px;
}
.tables{
  margin-top: 20px;
}
.block{
  display: flex;
  justify-content: center;
}
.red{
  color: red;
}
 .el-dialog__footer {

  text-align: center;
}
 .el-dialog__header {
    padding: 15px 30px 15px;
    background-color: #f3f4f7;
    border-radius: 8px 8px 0 0;
}
.el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 15px 50px;
}

form.el-form {
    margin-left: 50px;
}
.tip{
margin-left: 130px;
    margin-bottom: 14px;
    color: rgb(186, 192, 205);
    line-height: 12px;
}
.el-form-item__content{
  line-height: 35px;
}
</style>
